<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.highlight{
		color:red;
	}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		//加载全部数据
		$.post("SearchServlet",{},function(data){
			$("#content").empty();
			$.each(data,function(i,v){
				var dd = "<tr><td>"+v.id+"</td><td>"+v.postName+"</td><td>"+v.desc+"</td><tr>";
				$("#content").append(dd);
			});
		});
		//添加逻辑
		$("#insertBtn").click(function(){
			var id = $("#id").val();
			var postName = $("#postName").val();
			var desc = $("#desc").val();
			if(!(id&&postName&&desc)){
				return;
			}
			var url = "InsertDataServlet";
			var data = {"id":id,"postName":postName,"desc":desc};
			$.post(url,data,function(data){
				alert("添加成功！");
				$("#id").val("");
				$("#postName").val("");
				$("#desc").val("");
				location.reload(true);
			});
		});
		//查询逻辑
		$("#searchBtn").click(function(){
			var keywordValue = $.trim($("#keyword").val());
			/* if(!keywordValue){
				return;
			} */
			var url = "SearchServlet";
			var data = {"keyword":keywordValue};
			$.post(url,data,function(data){
				$("#content").empty();
				$.each(data,function(i,v){
					var dd = "<tr><td>"+v.id+"</td><td>"+v.postName+"</td><td>"+v.desc+"</td><tr>";
					$("#content").append(dd);
				});
			});
		});
	});
</script>
</head>
<body>
	<input type="text" id="id" placeholder="输入id">-
	<input type="text" id="postName" placeholder="输入职位名称">-
	<input type="text" id="desc" placeholder="输入职位描述" size="100">-
	<input type="button" value="插入测试数据" id="insertBtn">
	<br>
	<hr>
	<input type="text" id="keyword" placeholder="输入搜索关键字">-<input type="button" value="搜索" id="searchBtn">
	<br>
	<hr>
	<table border="1" style="width: 100%;">
		<thead>
			<tr>
				<td style="width: 50px;">ID</td>
				<td style="width: 120px;">岗位</td>
				<td>描述</td>
			</tr>
		</thead>
		<tbody id="content">
		</tbody>
	</table>
</body>
</html>